<template>
    <div class="wrapper">
        <h2><p class="tittle">{{ tagslist }}</p></h2><hr>
        <label>
            <ul class="box">
                <li class="tag hover-shadow " @click="choseTag(item)" v-for="(item,index) in $store.state.tags.tags" :key="index"><span ref="color">{{item.tag}}</span></li>
            </ul>
        </label>
    </div>
</template>

<script>

export default {
    name: 'TagList',
    components: {
        
    },
    data () {
        return {
            tagslist: '标签列表'
        }
        
    },
    methods: {
        randomRgbColor(){
            for (const item of this.$refs.color) {
                let R = Math.floor(Math.random() * 255);
                let G = Math.floor(Math.random() * 255);
                let B = Math.floor(Math.random() * 255);
                item.style.color = 'rgb(' + R + ',' + G + ',' + B + ')';
            }
        },
        choseTag(tag) {
            this.$parent.tag = tag;
        }
    },
    mounted() {
        this.randomRgbColor();
    }
    
}
</script>

<style lang="stylus" scoped>
.tittle
    padding 60px  20px 20px
.box
    display flex
    flex-wrap wrap
    .tag
        display inline
        background-color rgb(255, 255, 255)
        border-radius 8px
        text-align center
        padding 5px 10px
        margin 5px 10px
        .color
            color red
</style>